<div class="modal-body no-p">
  <div class="row">
    <div class="col-xs-12">
      <section class="panel panel-primary no-b">
        <header class="panel-heading clearfix brtl brtr">
          <div class="overflow-hidden">
            <a href="javascript:;" class="h4 show no-m pt5">{{user.username}}</a>
            <small>{{user.username}}</small>
          </div>
        </header>
        
        {% if userFirstMenus and userFirstMenus.length > 0 %}
       
        <table id="menuTreeTable" class="table no-m">
          <thead>
          <tr>
            <th class="col-md-2 pd-l-lg">
              <span class="pd-l-sm ml20"></span>菜单名称
            </th>
            <th class="col-md-3">URL</th>
            <th class="col-md-2">权限标识</th>
          </tr>
          </thead>
          <tbody>
          	{% for firstMenu in userFirstMenus%}
         

          <tr data-tt-id="{{ firstMenu.id }}" data-tt-parent-id="{{'' if firstMenu.pid==0 else firstMenu.pid }}"
              data-tt-branch="{{firstMenu.hasChildren }}">
            <td><span class="pd-l-sm"></span><i class="{{ firstMenu.icon }} mr5"></i> {{ firstMenu.name }}</td>
            <td>{{ firstMenu.url}}</td>
            <td>{{ firstMenu.code }}</td>
          </tr>
          {% endfor %}

          </tbody>
        </table>
        {% else %}

        <div class="p10">
          <div class="alert alert-warning">
            此用户没有权限菜单。
          </div>
        </div>
       {% endif %}
      </section>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">知道了</button>
</div>
<script type="text/javascript">
  var allRes = {{userSecondMenus | safe}};
  var menuTreeTable;
  $(function () {
    menuTreeTable = $("#menuTreeTable").treetable({
      expandable: true,
      onNodeExpand: function () {
        var node = this;
        var data = "";
        var childs = [];
        $.each(allRes, function (i, n) {
        	
          if (n.pid == node.id) {
            childs.push(n);
             console.log(childs)
          }
        });
        console.log(childs)
        $.each(childs, function (i, n) {
          var url = n.url || '';
          var permission = n.code || '';
          var row = "<tr data-tt-id='" + n.id + "' data-tt-parent-id='" + n.pid + "' data-tt-branch='" + n.hasChildren + "'>";
          row += "<td><span class='pd-l-sm'></span><i class='" + n.icon + " mr5'></i> " + n.name + "</td>";
          row += "<td>" + url + "</td>";
          row += "<td>" + permission + "</td>";
          row += "</tr>";
          data += row;
        });
        menuTreeTable.treetable("unloadBranch", node);
        menuTreeTable.treetable("loadBranch", node, data);
      }
    });
  });
</script>
